<template>
  <div
    class="card-container"
    :class="{
      'is-select': isSelect,
      'is-layout': card.cardKey === 'formLayout',
    }"
  >
    <div
      v-if="displayName && card.cardKey !== 'formGroupTitle'"
      class="card-label"
    >
      <div class="text">
        {{ displayName.defaultValue }}
      </div>
    </div>
    <div
      class="card-field"
      :class="{
        readonly: mode === 'design' && card.cardKey !== 'formLayout',
      }"
    >
      <component
        :is="GetCardComponent(card)"
        :card="card"
        :mode="mode"
        :curCardCode="curCardCode"
        :formCards="formCards"
        @onUpdateChildCards="onUpdateChildCards"
      />
    </div>
    <div class="card-copy" v-show="isSelect" @click="onCopy">
      <rb-icon type="icon-luoshu-copy" />
    </div>
    <div class="card-remove" v-show="isSelect" @click="onRemove">
      <rb-icon type="icon-luoshu-remove" />
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from 'vue';
import { useStore } from 'vuex';
import { message } from 'ant-design-vue';
import cloneDeep from 'lodash/cloneDeep';
import { GetCardComponent } from '@/global/util/formDesign';
import { GetCardCode } from '@/global/util/common';

export default defineComponent({
  name: 'CardContainer',
  components: {},
  props: {
    mode: {
      type: String,
      default: '',
    },
    curCardCode: {
      type: String,
      default: '',
    },
    card: {
      type: Object as any,
      default: () => ({}),
    },
    formCards: {
      type: Array as any,
      default: () => [],
    },
  },
  setup(props) {
    const store = useStore();
    const updateValue = (val: any, key: string, obj: any) => {
      Object.assign(obj, { [key]: val });
    };
    const displayName = computed(() => props.card.controls.displayName);
    const isSelect = computed(() => props.curCardCode === props.card.cardCode);
    const onCopy = (ev: Event) => {
      // 防止触发卡片容器选中
      ev.stopPropagation();
      // 系统卡片不允许重复
      if (props.card.group === 'system') {
        return message.warning('系统卡片不允许重复');
      }
      const newCard = cloneDeep(props.card);
      const index = props.formCards.findIndex(
        (it: any) => it.cardCode === props.curCardCode,
      );
      const cardCode = GetCardCode(props.formCards);
      Object.assign(newCard, { cardCode });
      if (newCard?.controls?.cardCode) {
        newCard.controls.cardCode.defaultValue = cardCode;
      }
      if (newCard?.controls?.displayName) {
        const name = newCard.controls.displayName.defaultValue;
        newCard.controls.displayName.defaultValue = `副本_${name}`;
      }
      store.commit('formDesign/InsertFormCard', {
        card: newCard,
        index: index + 1,
      });
      store.commit('formDesign/SetCurCardCode', cardCode);
    };
    const onRemove = (ev: Event) => {
      ev.stopPropagation(); // 防止触发卡片容器选中
      store.commit('formDesign/RemoveFormCard', props.curCardCode);
      store.commit('formDesign/SetCurCardCode', '');
    };
    const onUpdateChildCards = (cards: any[], cardCode: string) => {
      store.commit('formDesign/AddChildCard', { cards, cardCode });
    };

    return {
      GetCardComponent,
      updateValue,
      isSelect,
      displayName,
      onCopy,
      onRemove,
      onUpdateChildCards,
    };
  },
});
</script>
<style lang="less" scoped>
.card-container {
  position: relative;
  padding: 12px 24px;
  min-height: 52px;
  border-bottom: 1px solid @rb-disabled-bg-color;
  cursor: grabbing;
  &:hover {
    background-color: @rb-background-color;
  }
  &.is-select {
    background-color: @rb-background-color-light;
    border: 1px dashed @rb-primary-color !important;
  }
  &.is-layout {
    padding: 12px 0;
  }
  .card-label {
    .text {
      margin-bottom: 4px;
      line-height: 22px;
      font-weight: 600;
      word-break: break-word;
    }
  }
  .card-field.readonly {
    pointer-events: none;
  }

  .card-copy,
  .card-remove {
    position: absolute;
    top: 0;
    display: flex;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 16px;
    color: @rb-text-color-light;
    .rb-icon {
      .flexRow(center, center);
      width: 100%;
    }
  }
  .card-copy {
    right: 50px;
    background: @rb-chart-6;
  }
  .card-remove {
    right: 10px;
    background: @rb-error-color;
  }
}
</style>
